<template>
    <div class="box-wrapper">
        <div class="search-wrap">
            <div class="item">
                <el-input v-model="applyUser" placeholder="申请人姓名"></el-input>
            </div>
            <div class="item">
                <el-input v-model="department" placeholder="所属单位"></el-input>
            </div>
            <div class="item">
                <el-input v-model="beUser" placeholder="负责人姓名"></el-input>
            </div>
            <div class="item">
                <el-input v-model="securityUser" placeholder="安全员姓名"></el-input>
            </div>
            <div class="t-rig" style="padding:5px;width:100%;">
                <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                <el-button class="btn" @click="resetClick">重置</el-button>
            </div>
        </div>
        <div class="query-box t-rig" v-if="hasPermission('depPaperPracticeDownLoad')">
            <el-button @click="exportClick('xuewei')" class="btn" type="primary">导出</el-button>
        </div>
        <el-table v-loading="loading" ref="multipleTable" :header-cell-style="headerStyle" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="name" label="申请人">
            </el-table-column>
            <el-table-column prop="department" label="所属单位">
            </el-table-column>
            <el-table-column prop="apply_type" label="申请类型">
            </el-table-column>
            <el-table-column prop="address" label="实验室位置">
            </el-table-column>
            <el-table-column prop="riskType" label="是否涉及重要危险源" width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.riskType ? '是': '否'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="riskType" label="涉及危险源类别" width="180">
            </el-table-column>
            <el-table-column prop="apply_date" label="申请时间" width="180">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <span class="t-sh" v-if="scope.row.status == 0">审核中</span>
                    <span class="t-th" v-if="scope.row.status == 1">退回修改中</span>
                    <span class="t-tg" v-if="scope.row.status == 2">通过</span>
                    <span class="t-zi" v-if="scope.row.status == -1">终止流程</span>
                    <span class="t-zf" v-if="scope.row.status == -2">作废</span>
                </template>
            </el-table-column>
            <el-table-column prop="oprate" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button class="t-zf" @click="voidTable(scope.row,'kecheng')" type="text" size="small">作废</el-button>
                    <el-button @click="viewClick(scope.row,'keyan')" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page" v-if="total> 0 && tableData.length > 0">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10,20,30,40]"
                :page-size="pageSize"
                layout="prev,pager,next,sizes,total"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request"
import mixin from '@/assets/js/mixin'
export default{
    mixins: [mixin],
    data() {
        return {
            loading: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            isDialog: false,
            headerStyle: {
                background: '#f2f2f2',
                color: '#000'
            },
            dataType: '',
            dataInfo: {},
            dataTitle: '',
            applyUser: '',
            department: '',
            beUser: '',
            securityUser: '',
            detailUserId: ''
        }
    },
    created() {
        this.initData()
    },
    methods: {
        getDetail(params) {
            request({
                url: '/manager/system/user/userInfo.jsp',
                method: 'post',
                data: {
                    userId: params,
                }
            }).then(res => {
                if(res.code == 200) {
                    this.dataInfo = res.data
                }
            })
        },
        delClick(params) {
            this.$confirm('确认删除这条数据?','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request({
                    url: '/manager/system/user/userInfoSave.jsp',
                    method: 'post',
                    data: {
                        txtAction: 'delete',
                        userId: params.userId
                    }
                }).then(res => {
                    if(res.code == 200) {
                        this.$message({
                            message: '已删除',
                            type: 'success'
                        });
                        this.initData()
                    }
                })
            }).catch(() => {
                
            })
        },
        dialogChange() {
            this.isDialog = false
            this.initData()
        },
        addClick() {
            this.dataTitle = '新增用户'
            this.isDialog = true
        },
        queryClick() {
            this.initData()
        },
        resetClick() {
            this.userName = ''
            this.userCode = ''
            this.jaccountCode = ''
            this.companyName = ''
            this.currentPage = 1
            this.initData()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.initData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        },
        initData() {
            this.loading = true
            request({
                url: '/manager/business/businessInfoQuery.jsp',
                method: 'post',
                data: {
                    source: '23',
                    applyUser: this.applyUser,
                    department: this.department,
                    beUser: this.beUser,
                    securityUser: this.securityUser,
                    page: this.currentPage,
                    limit: this.pageSize
                }
            }).then(res => {
                if(res.code == 200) {
                    this.tableData = res.data || []
                    this.total = res.count
                    this.loading = false
                    if (this.tableData.length === 1) {
                        this.currentPage--
                        if (this.currentPage <= 0) {
                            this.currentPage = 1
                        }
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.box-wrapper{
    background: #fff;
    .title-name{
        line-height: 30px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        span{
            color: #409EFF;
            display: inline-block;
            border-bottom: 2px solid #409EFF;
        }
    }
}
/deep/.search-wrap{
    margin: 20px 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background: #b1cbff;
    .item{
        width: 25%;
        padding: 5px;
    }
    .btn{
        padding: 0;
        width: 80px;
        height: 32px;
        border: none;
        // background: #016aed;
    }
    .bg-blue{
        color: #ffffff;
        background: #016aed;
    }
    .el- {
        width: 100%;
    }
    .el-input{
        .el-input__inner{
            height: 32px;
        }
    }
}
.query-box{
    margin: 20px 0;
    .btn{
        padding: 0;
        width: 100px;
        height: 32px;
        background: #016aed;
    }
}
.tabHeader{
    background: #f2f2f2;
}
.page{
    padding: 20px 0;
    border-top: 1px solid #d5d5d5;
    text-align: right;
}
/deep/.el-table{
    .el-table__cell{
        vertical-align: top;
    }
}
</style>